<template>
    <div class="app">
        <my-navbar title="报表"></my-navbar>
        <div style="flex: 1;" class="report_content" @touchend="handleEnd" @touchstart="handleStart">
            <div class="report_content_header bg_linear_gradient_header"></div>
            <div style="flex: 1;margin-top: 20px">
                <component  style="flex: 1" ref="content" :startDate="startDate" :endDate="endDate" :is="componentName"/>
            </div>
            <div style="width: 300px;height: 25px;"></div>
        </div>
        <div :style="{top:statusBarHeight + 'px'}" class="reportHeader bg_linear_gradient_header">
            <text class="reportHeaderTitle">帮你更好的经营</text>
            <div class="reportTabs">
                <div class="reportTabs_item" @click="tabsClick('0')">
                    <text :class="[tabsIndex == 0 ?'reportTabs_itemTitle':'reportTabs_itemTitle_no']">收款</text>
                    <div :class="[tabsIndex == 0 ?'reportTabs_itemIcon':'reportTabs_itemIconTwo']"></div>
                </div>
                <div class="reportTabs_item" @click="tabsClick('1')">
                    <text :class="[tabsIndex == 1 ?'reportTabs_itemTitle':'reportTabs_itemTitle_no']">订单</text>
                    <div :class="[tabsIndex == 1 ?'reportTabs_itemIcon':'reportTabs_itemIconTwo']"></div>
                </div>
                <div class="reportTabs_item" @click="tabsClick('2')">
                    <text :class="[tabsIndex == 2 ?'reportTabs_itemTitle':'reportTabs_itemTitle_no']">销售</text>
                    <div :class="[tabsIndex == 2 ?'reportTabs_itemIcon':'reportTabs_itemIconTwo']"></div>
                </div>
                <div class="reportTabs_item" @click="tabsClick('3')">
                    <text :class="[tabsIndex == 3 ?'reportTabs_itemTitle':'reportTabs_itemTitle_no']">配送</text>
                    <div :class="[tabsIndex == 3 ?'reportTabs_itemIcon':'reportTabs_itemIconTwo']"></div>
                </div>
            </div>
            <div class="reportDate">
                <div :class="[dateIndex == 0?'reportDate_item':'reportDate_item_no']" @click="dateTabsClick('0')">
                    <text :class="[dateIndex == 0?'reportDate_item_title':'reportDate_item_title_no']">日</text>
                </div>
                <div :class="[dateIndex == 1?'reportDate_item':'reportDate_item_no']" @click="dateTabsClick('1')">
                    <text :class="[dateIndex == 1?'reportDate_item_title':'reportDate_item_title_no']">周</text>
                </div>
                <div :class="[dateIndex == 2?'reportDate_item':'reportDate_item_no']" @click="dateTabsClick('2')">
                    <text :class="[dateIndex == 2?'reportDate_item_title':'reportDate_item_title_no']">月</text>
                </div>
                <div class="report_time" @click="pickTime">
                    <text class="report_time_content">{{dateContent}}</text>
                    <div class="report_time_line"></div>
                    <text class="report_time_icon">&#xe63c;</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import myNavbar from '../../components/myNavbar/myNavbar.vue'
    import warehouse from './component/warehouse.vue'
    import collection from './component/collection.vue'
    import order from './component/order.vue'
    import distribution from './component/distribution.vue'

    const picker = weex.requireModule('picker')
    export default {
        data() {
            return {
                tabsIndex: 0,
                statusBarHeight: eeui.getStatusBarHeightPx() + 100,
                componentName: 'collection',
                startNum: '',
                dateIndex: 10,
                dateContent: new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate(),
                timeValue: '',
                startDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
                endDate: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
            }
        },
        components: {
            myNavbar, collection, order, distribution, warehouse
        },
        create() {
            this.initIconFont()
        },
        methods: {
            tabsClick(index) {
                var _this = this
                this.tabsIndex = index
              this.startDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
              this.endDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
                this.dateContent= new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate()
                this.dateIndex = 10
                if (index == 0) {
                    _this.componentName = 'collection'
                } else if (index == 1) {
                    _this.componentName = 'order'
                } else if (this.tabsIndex == 2) {
                    _this.componentName = 'warehouse'
                } else if (this.tabsIndex == 3) {
                    _this.componentName = 'distribution'
                }
            },
            handleEnd(e) {
                console.log('结束')
                console.log(e)
                var _this = this
                if (e.changedTouches[0].screenX > this.startNum && Number(e.changedTouches[0].screenX) - Number(this.startNum) >= 200) {
                    console.log('11111')
                    if (_this.tabsIndex == 0) {
                        return
                    }
                    this.startDate=''
                    this.endDate= ''
                    this.dateIndex = 10
                    this.dateContent= new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate()
                    _this.tabsIndex = Number(_this.tabsIndex) - 1
                    if (this.tabsIndex == 0) {
                        _this.componentName = 'collection'
                    } else if (this.tabsIndex == 1) {
                        _this.componentName = 'order'
                    } else if (this.tabsIndex == 2) {
                        _this.componentName = 'warehouse'
                    } else if (this.tabsIndex == 3) {
                        _this.componentName = 'distribution'
                    }
                } else if (e.changedTouches[0].screenX < this.startNum && Number(this.startNum) - Number(e.changedTouches[0].screenX) >= 200) {
                    if (_this.tabsIndex == 3) {
                        return
                    }
                    this.startDate=''
                    this.endDate= ''
                    this.dateIndex = 10
                    this.dateContent= new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate()
                    _this.tabsIndex = Number(_this.tabsIndex) + 1
                    if (this.tabsIndex == 0) {
                        _this.componentName = 'collection'
                    } else if (this.tabsIndex == 1) {
                        _this.componentName = 'order'
                    } else if (this.tabsIndex == 2) {
                        _this.componentName = 'warehouse'
                    } else if (this.tabsIndex == 3) {
                        _this.componentName = 'distribution'
                    }
                }
                console.log(_this.tabsIndex)
            },
            handleStart(e) {
                console.log('开始')
                console.log(e)
                this.startNum = e.changedTouches[0].screenX
            },
            dateTabsClick(index) {
                var _this = this
                this.dateIndex = index
                if (index == 0) {
                    _this.dateContent = new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate()
                    _this.startDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
                    _this.endDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
                } else if (index == 1) {
                    _this.getWeekStartAndEnd(new Date())
                } else if (index == 2) {
                    // _this.dateContent = new Date().getFullYear() + '.' + (new Date().getMonth() + 1)
                    _this.formatYear(new Date())
                }
                setTimeout(() => {
                    if (this.tabsIndex == 0) {
                        this.$refs.content.paymentClick();
                    } else if (this.tabsIndex == 1) {
                        this.$refs.content.orderClick();
                    } else if (this.tabsIndex == 2) {
                        this.$refs.content.warehouseClick();
                    } else if (this.tabsIndex == 3) {
                        this.$refs.content.shippingClick();
                    }
                }, 200)
            },
            formatDate(date) {
                var myyear = date.getFullYear();
                var mymonth = date.getMonth() + 1;

                var myweekday = date.getDate();
                if (mymonth < 10) {
                    mymonth = "0" + mymonth;
                }
                if (myweekday < 10) {
                    myweekday = "0" + myweekday;
                }
                return mymonth + "-" + myweekday
            },

            // 获取指定日期的那一周的开始、结束日期

            getWeekStartAndEnd(val) {
                var _this = this
                let now = '';
                if (val) {
                    now = new Date(val); // 日期
                } else {
                    now = new Date(); // 日期
                }
                let nowDayOfWeek = now.getDay(); // 本周的第几天
                let nowDay = now.getDate(); // 当前日
                let nowMonth = now.getMonth(); // 当前月
                let nowYear = now.getFullYear(); // 当前年
                let weekStart = this.getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek)
                let weekEnd = this.getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek)
                this.dateContent = new Date(val).getFullYear() + '.' + weekStart.replace("-",".") + '-' + weekEnd.replace("-",".")
                _this.startDate = new Date(val).getFullYear() + '-' + weekStart
                _this.endDate = new Date(val).getFullYear() + '-' + weekEnd
            },

            // 获得某一周的开始日期

            getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
                let weekStartDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek + 1)
                return this.formatDate(weekStartDate)
            },

            // 获得某一周的结束日期

            getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
                let weekEndDate = new Date(nowYear, nowMonth, nowDay + (7 - nowDayOfWeek))
                return this.formatDate(weekEndDate)
            },
            pickTime() {
                var _this = this
                picker.pickDate({
                    value: this.dateContent
                }, event => {
                    if (event.result === 'success') {
                        if (_this.dateIndex == 0) {
                            _this.dateContent = event.data
                            _this.startDate = _this.dateContent
                            _this.endDate = _this.dateContent
                        } else if (_this.dateIndex == 1) {
                            _this.getWeekStartAndEnd(event.data)
                        } else if (_this.dateIndex == 2) {
                            _this.formatYear(event.data)
                        }
                        setTimeout(() => {
                            if (this.tabsIndex == 0) {
                                this.$refs.content.paymentClick();
                            } else if (this.tabsIndex == 1) {
                                this.$refs.content.orderClick();
                            } else if (this.tabsIndex == 2) {
                                this.$refs.content.warehouseClick();
                            } else if (this.tabsIndex == 3) {
                                this.$refs.content.shippingClick();
                            }
                        }, 200)

                    }
                })
            },
            formatYear(date) {
                var _this = this
                var yearTime = new Date(date)
                var myyear = yearTime.getFullYear();
                var mymonth = yearTime.getMonth() + 1;
                if (mymonth < 10) {
                    mymonth = "0" + mymonth;
                }
                _this.dateContent = myyear + "." + mymonth + "." + 1 + "-" + mymonth + "." +new Date(myyear, mymonth, 0).getDate()
                _this.startDate = myyear + "-" + mymonth + "-" + 1
                _this.endDate = myyear + "-" + mymonth + "-" +new Date(myyear, mymonth, 0).getDate()
            },
        }
    }
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
    .app {
        background-color: rgba(248, 248, 248, 0.8);
        flex: 1
    }

    .reportHeader {
        width: 750px;
        height: 300px;
        box-sizing: border-box;
        /*padding-top: 25px;*/
        padding-left: 25px;
        padding-right: 25px;
        position: absolute;
    }

    .reportHeaderTitle {
        margin-top: 20px;
        font-size: 60px;
        color: white;
        font-style: italic;
    }

    .tabbar {
        flex: 1;
        width: 750px;
    }

    .reportTabs {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 40px;
    }

    .reportTabs_item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 60px;
    }

    .reportTabs_itemTitle {
        font-size: 34px;
        color: white;
        font-weight: 700;
    }

    .reportTabs_itemTitle_no {
        font-size: 32px;
        color: white;
    }

    .reportTabs_itemIcon {
        width: 60px;
        height: 4px;
        background-color: white;
        border-radius: 60px;
        margin-top: 4px;
    }

    .reportTabs_itemIconTwo {
        width: 60px;
        height: 4px;
        border-radius: 60px;
        margin-top: 4px;
    }

    .reportDate {
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        margin-top: 30px;
    }

    .reportDate_item {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
    }

    .reportDate_item_no {
        width: 80px;
        height: 80px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
    }

    .reportDate_item_title {
        font-size: 40px;
        color: #0ED2F7;
    }

    .reportDate_item_title_no {
        font-size: 40px;
        color: white;
    }

    .report_time {
        /*width: 270px;*/
        height: 80px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.2);
        position: absolute;
        right: 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .report_time_icon {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: iconfont2;
        font-size: 40px;
        color: white;
        text-align: center;
        line-height: 72px;
    }

    .report_time_line {
        width: 2px;
        height: 60px;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 10px;
    }

    .report_time_content {
        flex: 1;
        font-size: 34px;
        color: white;
        text-align: center;
        margin-left: 20px;
        margin-right: 20px;
    }

    .report_content {
        width: 750px;
        margin-top: 300px;
        position: relative;
        box-sizing: border-box;
    }

    .report_content_header {
        width: 750px;
        height: 50px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        position: absolute;
        top: 0;
    }
</style>
